<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin="anonymous" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .back{
            position: fixed;
            left: 0;
            top: 0;
            background-color: rgba(0,0,0,.5);
            width: 100vw;
            height: 100vh;
            display: none;
        }
        .back .box{
            position: absolute;
            left: 50%;   
            top:50%;
            max-width: 500px;
            min-width: 250px;
            background-color: #fff;
            padding: 20px;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <a href="./login.html">管理员登录</a>
    <input type="text"><button>搜索</button>
    <button id="add">新增</button>
    <ul id="news">
    </ul>

    <div class="back">
        <div class="box">
            <form>
                <div>
                    <label for="title">标题</label>
                    <input type="text"  id="title">
                </div>
                <div>
                    <label for="news_date">日期</label>
                    <input type="date" id="news_date">
                </div>
                <div>
                    <button id="submit" type="button">提交</button>
                    <button id="close" type="button">关闭</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // 获取新闻列表
        function getList(keyname=''){
            $.ajax({
                url:`http://127.0.0.1:7001/api/news?keyname=${keyname}`,
                method:"get",
                headers:{
                    token:localStorage.getItem('mytoken')
                },
                success:function(res){
                    news.innerHTML=''
                    if(res.code===0){
                        for (const item of res.data) {
                            console.log(res.data);
                            console.log(item);
                            const li = document.createElement('li')  
                            li.innerHTML = `${item.title}<button data-id="${item.id}">编辑</button> <button data-id="${item.id}">删除</button>`
                            news.appendChild(li);
                        }
                    }
                    else{
                        alert(res.msg);
                        // location.href ='./login.html';
                    }
                }
            }) 
        }
        // 获取新闻详情
        function getInfo(id){
            $.ajax({
                url:`http://127.0.0.1:7001/api/news/${id}`,
                method:"get",
                headers:{
                    token:localStorage.getItem('mytoken')
                },
                success:function(res){
                    if(res.code===0){
                        console.log(res);
                        title.value = res.data.title;
                        date_time.value = res.data.tiem_d;
                    }
                    else if (res.code === 4005){
                        alert(res.msg);
                        location.href ='./login.html';
                    }
                }
            }) 
        }
        // 添加新闻
        function addNews(data){
            $.ajax({
                url:`http://127.0.0.1:7001/api/news`,
                method:"post",
                data,
                success:function(res){
                    if(res.code===0){
                        getList();
                        closeBack();
                    }else{
                        alert(res.msg);
                    }
                }
            }) 
        }
        // 编辑新闻
        function editNews(data,id){
            $.ajax({
                url:`http://127.0.0.1:7001/api/news/${id}`,
                method:"put",
                data,
                success:function(res){
                    if(res.code===0){
                        getList()
                        closeBack()
                    }else {
                        alert(res.msg)
                    }
                }
            }) 
        }
        const news = document.querySelector("#news"),
              input = document.querySelector('input'),
              but = document.querySelector('button'),
              add = document.getElementById('add'),
              back = document.querySelector('.back'),
              submit = document.getElementById('submit'),
              title = document.getElementById('title'),
              date_time = document.getElementById('news_date'),
              close = document.getElementById('close')
        let  isEdit = 0

        // 通过事件委托操作编辑
        news.onclick = function(event){
            // 1.弹出模态框
            back.style.display = 'block';
            const id = event.target.dataset.id;
            isEdit = id;
            getInfo(id);
        }
        // 新增按钮事件
        add.onclick = function(){
            back.style.display = 'block';
            isEdit = 0;
        }
        // 提交按钮事件
        submit.onclick = function(){
            // 编辑事件
            if(isEdit){
                editNews({
                    name:title.value,
                    tiem_d:date_time.value
                },isEdit)
            }else{
                addNews({
                    name:title.value,
                    tiem_d:date_time.value
                })
            }     
        };
        // 关闭按钮事件
        close.onclick = function(){
            closeBack();
        };
        // 关闭模态框函数
        function closeBack(){
            title.value = ''
            date_time.value = ''
            back.style.display = 'none'
        };
        
        but.onclick = function(){
            getList(input.value) 
        };

        getList();

        const token = localStorage.getItem('mytoken');
        // console.log(token);
       
    </script>
</body>
</html>